<template>
  <div id="app">
    <!-- 区域1 -->
    <div id="area1">
      <Box :options="box1" />
    </div>
    <!-- 区域2 -->
    <div id="area2">
      <Box :options="box2" />
    </div>
  </div>
</template>

<script>
import Box from './Box/index.vue';

export default {
  name: 'App',
  components: { Box },
  data() {
    return {
      box1: {
        /** 区域大小 单位: 个 */
        wSize: 5,
        hSize: 4,
        /** 间隙宽占比, 高占比 单位: px */
        wGapSize: 20,
        hGapSize: 20,
        /** 暂停时间 单位: 秒 */
        stopTime: 3,
        /** 发牌时间 单位: 秒 */
        refreshTime: 3,
        /** 组件类型配置 */
        boxConfig: [
          {
            start: 9, // 起始数量
            limit: 9, // 限制最多多少
            refresh: 2, // 每次刷新增加多少
            size: { ws: 1, hs: 1 }, // 组件大小
          }, // 1x1 // 11
          {
            start: 3,
            limit: 3,
            refresh: 1,
            size: { ws: 2, hs: 1 },
          }, // 2x1 // 2
        ],
        // 初始接口 > 用于获取初始数据 : 返回 Promise
        netInit: this.netGetInit,
        // 刷新接口 > 用于获取刷新数据 : 返回 Promise
        netRefresh: this.netGetRefresh,
      },
      box2: {
        /** 区域大小 单位: 个 */
        wSize: 3,
        hSize: 4,
        /** 间隙宽占比, 高占比 单位: px */
        wGapSize: 20,
        hGapSize: 20,
        /** 暂停时间 单位: 秒 */
        stopTime: 3,
        /** 发牌时间 单位: 秒 */
        refreshTime: 5,
        /** 组件类型配置 */
        boxConfig: [
          {
            start: 3, // 起始数量
            limit: 3, // 限制最多多少
            refresh: 1, // 每次刷新增加多少
            size: { ws: 1, hs: 1 }, // 组件大小
          }, // 1x1 // 11
          {
            start: 2,
            limit: 2,
            refresh: 1,
            size: { ws: 2, hs: 1 },
          }, // 2x1 // 2
        ],
        // 初始接口 > 用于获取初始数据 : 返回 Promise
        netInit: this.netGetInit,
        // 刷新接口 > 用于获取刷新数据 : 返回 Promise
        netRefresh: this.netGetRefresh,
      },
    };
  },

  methods: {

    /** 网络# 获取初始配置 */
    async netGetInit(reqConfig) {
      // const reqConfig = [ // 传入格式
      //   { ws: 1, hs: 1, number: 3 }, // 解释：1x1 的组件，数量为 3
      //   { ws: 2, hs: 1, number: 1 }, // 解释：2x1 的组件，数量为 1
      // ];
      // const result = [ // 返回格式
      //   {
      //     size: { ws: 1, hs: 1 }, // 组件大小
      //     data: [{...}, ...], // 每个组件的数据
      //   }
      // ];
      const result = [];
      reqConfig.forEach((vo) => {
        const { ws, hs, number } = vo;
        const data = [];
        for (let i = 0; i < number; i++) {
          data.push({
            // 各种模块内属性, 下面都是瞎定义的, 具体根据实际情况来
            text: `${ws === 1 ? 'A' : 'B'}-${Math.random().toString(36).slice(-8)}`,
            styles: {
              color: 'white',
              background: ws === 2 ? '#409EFF' : '#909399',
              textAlign: 'center',
              fontSize: '15px',
            },
          });
        }
        result.push({ size: { ws, hs }, data });
      });
      return result;
    },

    /** 网络# 获取刷新 */
    async netGetRefresh(reqConfig) {
      // const reqConfig = [ // 传入格式
      //   { ws: 1, hs: 1, number: 3 }, // 解释：1x1 的组件，数量为 3
      //   { ws: 2, hs: 1, number: 1 }, // 解释：2x1 的组件，数量为 1
      // ];
      // const result = [ // 返回格式
      //   {
      //     size: { ws: 1, hs: 1 }, // 组件大小
      //     data: [{...}, ...], // 每个组件的数据
      //   }
      // ];
      const result = [];
      reqConfig.forEach((vo) => {
        const { ws, hs, number } = vo;
        const data = [];
        for (let i = 0; i < number; i++) {
          data.push({
            // 各种模块内属性
            text: `${ws === 1 ? 'A' : 'B'}-${Math.random().toString(36).slice(-8)}`,
            styles: {
              color: 'white',
              background: ws === 2 ? '#409EFF' : '#909399',
              textAlign: 'center',
              fontSize: '15px',
            },
          });
        }
        result.push({ size: { ws, hs }, data });
      });
      return result;
    },
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  font-family: 'PingFang SC'
}

#app {
  display: flex;
  justify-content: space-between;
  padding: 50px;
}
#area1 {
  width: 780px;
  height: 620px;
  flex-shrink: 0;
  background-color: #EBEEF5;
}

#area2 {
  width: 460px;
  height: 620px;
  flex-shrink: 0;
  background-color: #EBEEF5;
}
</style>
